<template>
  <div>
    <el-input v-model="soNo" :disabled="isDisabled" readonly>
      <i v-show="!isDisabled" slot="suffix" class="el-input__icon el-icon-circle-plus" @click="openDia"/>
      <i v-show="!isDisabled" slot="suffix" class="el-input__icon el-icon-error" @click="changeDE"/>
    </el-input>
    <el-dialog
      ref="dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"

      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="销售单选择"
      width="75%"
      @opened="searchHandle"
    >
      <div class="searchform">
        <!-- 查询条件 -->
        <el-form
          ref="searchForm"
          :inline="true"
          :model="search"
          size="mini"
          label-width="100px"
          label-position="right">
          <el-form-item prop="soNo" label="销售单号">
            <el-input v-model="search.soNo" class="search-input" />
          </el-form-item>
          <el-form-item prop="customerName" label="客户名称">
            <el-input v-model="search.customerName" class="search-input" />
          </el-form-item>
          <el-form-item prop="vin" label="VIN号">
            <el-input v-model="search.vin" class="search-input" />
          </el-form-item>
          <el-form-item prop="isInvoice" label="是否开票">
            <Radio v-model="search.isInvoice" type="1004" />
          </el-form-item>
          <!-- <el-form-item prop="soStatus" label="订单状态">
           <r-select v-model="search.soStatus" placeholder="请选择" clearable type='1404'
            excludeCode="14041001,14041002,14041003,14041004,14041005,14041006,14041007,14041008,14041009,14041011,14041012,14041013,14041015,14041016,14041017,14041018,14041019,14041020,14041021,14041022,14041023,14041024,14041025,14041026" class="search-input"></r-select>
        </el-form-item> -->
          <br>
          <div style="text-align:center">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="table">
        <div class="tableHead">
          <div class="tabletitle">销售订单信息</div>
        </div>
        <!-- 用户列表 -->
        <BaseTable ref="table" highlight-current-row @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @current-change="select" >
          <el-table-column label="序号" type="index" />
          <el-table-column label="选择" width="50">
            <template slot-scope="scope" >
              <el-radio v-model="radioValue" :label="scope.$index" @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="SO_NO" label="销售单号" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="VIN" label="VIN" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="SO_STATUS" label="订单状态" min-width="100">
            <template slot-scope="scope">
              <filtercode
                v-model="scope.row.SO_STATUS"
                type="1404"
              />
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="CUSTOMER_NO" label="客户编号" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="CUSTOMER_NAME" label="客户名称" min-width="200"/>
          <el-table-column :show-overflow-tooltip="true" prop="BRAND_NAME" label="品牌" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="SERIES_NAME" label="机种" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="MODEL_NAME" label="机型" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="CONFIG_NAME" label="配置" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="COLOR_NAME" label="颜色" min-width="150"/>
          <el-table-column :show-overflow-tooltip="true" prop="EMPLOYEE_NAME" label="销售顾问" min-width="100"/>
        </BaseTable>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <!-- <el-button type="text"><i class="el-icon-search magnifier"></i></el-button> -->
        <el-button type="primary" @click="confirmHandle" >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getselectSoNo } from '@/api/capitalsettle/saleSettlement/ordermanage'
import filtercode from '@/components/Checkbox/filtercode'
import BaseTable from '@/components/BaseTable'
import formMixins from '@/mixins/formMixins'
import rSelect from '@/components/Select/Select'
import Radio from '@/components/Radio/Radio'
export default {
  name: 'SelectSoNo',
  components: {
    BaseTable,
    filtercode,
    rSelect,
    Radio
  },
  mixins: [formMixins],
  props: {
    soNo: String,
    isDisabled: Boolean
  },
  data() {
    return {
      radioValue: {},
      dialogFormVisible: false,
      multipleSelection: {},
      search: {
        limit: 10,
        pageNum: 1,
        order: 'asc',
        sort: 'SO_NO_ID',
        soNo: '',
        customerName: '',
        vin: '',
        isInvoice: 10041002
      }
      // CUSTOMER_NAME: ""
    }
  },

  computed: {},
  mounted() {

  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      getselectSoNo(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    openDia() {
      this.dialogFormVisible = true
      this.resetForm('searchForm')
      this.multipleSelection = {}
      this.radioValue = {}
      this.searchHandle()
    },
    cancel() {
      this.dialogFormVisible = false
    },
    changeDE() {
      this.$emit('getselectSalesNo', {})
    },
    //  //销售订单选择
    // select(val) {
    //   if (val == null) {
    //     this.multipleSelection = [];
    //   } else {
    //     this.multipleSelection = val;
    //   }
    // },
    getTemplateRow(id, rowDate) {
      this.multipleSelection = rowDate
    },
    confirmHandle() {
      if (this.multipleSelection == null || this.multipleSelection.SO_NO == null) {
        this.$message({
          type: 'info',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getselectSalesNo', this.multipleSelection)
        this.dialogFormVisible = false
      }
    }

  }
}
</script>

<style scoped>

.magnifier {
  float: right;
  position: absolute;
  right: 50px;
  top: 23px;
  cursor: pointer;
}
</style>
